<template>
	<u-popup :show="show" mode="right" @close="show = false">
		<!-- <view class="mask"></view>	 -->
		<view class="content" :style="{'margin-top': (device.navigationBarHeight+20)+'px'}">
			<view class="price-title">价格区间</view>
			<view class="price-range">
				<u--input placeholder="最低价格" border="surround"
					customStyle="width:100px; margin-right:16rpx; background-color: #F9F9F9;" v-model="lowPrice"
					@change="onLowPriceChange" type="number"></u--input>
				<view class="line"></view>
				<u--input placeholder="最高价格" border="surround"
					customStyle="width:100px; margin-left:16rpx; background-color: #F9F9F9;" v-model="highPrice"
					@change="onHighPriceChange" type="number"></u--input>
			</view>

			<view class="footer-btn">
				<view class="reset" @click="onReset">重置</view>
				<view class="confirm" @click="onConfirm">确定</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		computed: {
			...mapState(['device']),
		},
		// props: {
		// 	show: {
		// 		type: Boolean,
		// 		default: false,
		// 	},
		// },

		data() {
			return {
				lowPrice: null,
				highPrice: null,
				show: false,
			}
		},
		methods: {
			// 
			reset(){
				this.highPrice = null
				this.lowPrice = null
				this.show = false
			},
			showFilter(isShow){
				this.show = isShow 
			},
			onLowPriceChange(e) {
				console.log("onLowPrice=", e)
				this.lowPrice = e
			},
			onHighPriceChange(e) {
				console.log("onLowPrice=", e)
				this.highPrice = e
			},
			onReset() {
				this.reset()
				this.$emit('reset', {
					"highPrice": this.highPrice,
					"lowPrice": this.lowPrice
				})
				
			},
			onConfirm() {
				this.$emit('confirm', {
					"highPrice": this.highPrice,
					"lowPrice": this.lowPrice
				})
				this.show = false
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/mixins/theme/xTheme.scss";

	// .x-filter {
	.mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.content {
		display: flex;
		flex-direction: column;


		.price-title {
			font-weight: 500;
			color: #2D2D2D;
			font-family: PingFang-SC;
			margin: 16rpx;
		}

		.price-range {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 16rpx;

			.line {
				width: 30rpx;
				height: 4rpx;
				background: #2d2d2d;
			}
		}

		.footer-btn {
			display: flex;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			width: 100%;

			.reset {
				margin: 16rpx;
				height: 80rpx;
				border: 2rpx solid $x-theme-color;
				// background-color: $x-theme-color;
				width: 250rpx;
				color: $x-theme-color;
				line-height: 80rpx;
				text-align: center;
			}

			.confirm {
				margin: 16rpx;
				height: 80rpx;
				background-color: $x-theme-color;
				width: 250rpx;
				color: white;
				line-height: 80rpx;
				text-align: center;

			}
		}


	}

	// }
</style>